<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE
 html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>公寓系统-后台管理</title>
<style type="text/css">
	html,body{
		height: 100%;
		margin: 0;
		width: 100%;
	}
	body{
		min-width: 970px;
		min-height: 700px;
		display: flex;
		flex-direction: column;
	}
	.header{
		background-color: #3C8DBC;
		height: 50px;
		display: flex;
		justify-content: space-between;
		padding:0 20px 0 10px;
		line-height: 50px;
	}
	a{
		text-decoration: none;
		font-size: 13px;
	}
	h1{
		margin: 0;
	}
	h1 a{
		color: #EEEEEE;
		font-size: 18px;
	}
	.user a{
		padding: 0px 15px 0 10px;
		color: white;
		font-size: 15px;
	}
	.main{
		display: flex;
		flex-flow: 1;
	}
	.left{
		width:220px;
		background-color: #222D32;
		height: 650px;
		margin: 0;
	}
	ul{
		margin: 0;
		padding: 0;
		font-size: 15px;
		list-style: none;
	}
	li{
		padding-left: 20px;
		line-height: 44px;
		color: #b8c7ce;
	}
	li a{
		color: #abb;
		text-decoration: none;
		display: block;
	}
	li a:hover{
		color: #fff;
	}
	.menu-title{
		border-left: 3px solid transparent;
		background-color: #222d32;
		color: #fff;
	}
	.menu-title.active{
		background-color: #111;
		border-left: 3px solid #f39c12;
	}
	.sub-menu{
		display: none;
	}
	.menu-title.active+li {
		display: block;
		background-color: #2C3B41;
	}
	.right{
		width: 100%;
		height: 100%;
	}
	iframe {
		width: 100%;
		height: 100%;
		border: none;
	}
</style>

</head>
<body>
	<!-- 头部部分 -->
	<div class="header">
		<h1><a href="#">公寓管理系统</a></h1>
		<div class="user">
			<a href="#">${username}</a>
			<a href="exit">退出</a>
		</div>
	</div>
	<!-- 导航栏主题部分 -->
	<div class="main">
		<ul class="left">
			<li class="menu-title active">
				<a href="#">公寓管理</a>
			</li>
			<li class="sub-menu">
				<ul>
					<li>
						<a target="pageBox" href="views/house/list.jsp">房屋信息</a>
					</li>
					<li>
						<a target="pageBox" href="views/contract/list.jsp">合同信息</a>
					</li>
					<li>
						<a target="pageBox" href="views/lessee/list.jsp">租户信息</a>
					</li>
					<li>
						<a target="pageBox" href="views/rent/list.jsp">房租信息</a>
					</li>
				</ul>
			</li>
			<li class="menu-title">
				<a href="#">服务管理</a>
			</li>
			<li class="sub-menu">
				<ul>
					<li>
						<a target="pageBox" href="views/logistics/list.jsp">后勤人员</a>
					</li>
					<li>
						<a target="pageBox" href="views/record/list.jsp">修缮记录</a>
					</li>
					<li>
						<a target="pageBox" href="views/activity/list.jsp">公寓活动</a>
					</li>
				</ul>
			</li>
		</ul>
		<!-- 右侧变化区域 -->
		<div class="right">
			<iframe name="pageBox" src="views/house/list.jsp"></iframe>
		</div>
	</div>
</body>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script>
	$(function () {
		$(".menu-title").click(function () {
			$(".menu-title").removeClass("active");
			$(this).addClass("active");
		})
	})
</script>

</html>